<template>
  <el-dialog v-model="dialogVisible" :title="title" width="60%" :before-close="handleClose">
    <el-table :data="tableData" border style="width: 100%" height="500">
      <el-table-column type="index" label="序号" width="60" align="center" />
      <template v-for="column in columns" :key="column.prop">
        <el-table-column
          :prop="column.prop"
          :label="column.label"
          :width="column.width"
          :align="column.align"
          show-overflow-tooltip
        >
          <template #default="scope" v-if="column.formatter">
            {{ column.formatter(scope.row[column.prop]) }}
          </template>
        </el-table-column>
      </template>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import http from '@/util/http1'

const emit = defineEmits(['update:modelValue'])
const dialogVisible = ref(false)
const tableData = ref([])
const title = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

const columnConfigs = {
  line1: [
    { prop: 'date', label: '日期', width: '120', align: 'center' },
    { prop: 'totalAmount', label: '总收入(万元)', align: 'center' },
    { prop: 'balance', label: '支付差(万元)', align: 'center' },
  ],
  line2: [
    { prop: 'date', label: '日期', width: '120', align: 'center' },
    { prop: 'worker', label: '职工费用(万元)', align: 'center' },
    { prop: 'resident', label: '居民费用(万元)', align: 'center' },
    { prop: 'other', label: '其他费用(万元)', align: 'center' },
  ],
  line3: [
    { prop: 'name', label: '床位费(万元)', width: '120', align: 'center' },
    { prop: 'val1', label: '西药费(万元)', align: 'center' },
    { prop: 'val2', label: '中成药费(万元)', align: 'center' },
    { prop: 'val3', label: '检查费(万元)', align: 'center' },
    { prop: 'val4', label: '检验费(万元)', align: 'center' },
    { prop: 'val5', label: '治疗费(万元)', align: 'center' },
    { prop: 'val6', label: '手术费(万元)', align: 'center' },
    { prop: 'val7', label: '护理费(万元)', align: 'center' },
    { prop: 'val8', label: '中药饮片费(万元)', align: 'center' },
    { prop: 'val9', label: '诊查费(万元)', align: 'center' },
    { prop: 'val10', label: '卫生材料费(万元)', align: 'center' },
    { prop: 'val11', label: '其他(万元)', align: 'center' },
  ],
  line4: [
    { prop: 'name', label: '科室名称', width: '120', align: 'center' },
    { prop: 'total', label: '总费用(万元)', align: 'center' },
    { prop: 'amount', label: '盈亏金额(万元)', align: 'center' },
    { prop: 'proportion', label: '盈亏占比(%)', align: 'center' },
  ],
  line5: [
    { prop: 'val1', label: '总比例数(例)', width: '120', align: 'center' },
    { prop: 'val2', label: '入组病例数(例)', align: 'center' },
    { prop: 'val3', label: '入组率(%)', align: 'center' },
  ],
  line6: [
    { prop: 'val1', label: '全部手术(例)', width: '120', align: 'center' },
    { prop: 'val2', label: '四级手术(例)', align: 'center' },
    { prop: 'val3', label: '四级手术占比(%)', align: 'center' },
  ],
  line7: [
    { prop: 'val1', label: '院内平均值', width: '120', align: 'center' },
    { prop: 'val2', label: '区域平均值', align: 'center' },
  ],
  line8: [
    { prop: 'val1', label: '盈亏金额(万元)', width: '120', align: 'center' },
    { prop: 'val2', label: '区域平均值', align: 'center' },
  ],
  line9: [
    { prop: 'val1', label: '时间消耗指数与费用消耗指数', width: '120', align: 'center' },
    { prop: 'val2', label: '费用消耗指数', align: 'center' },
  ],
  line10: [
    { prop: 'val1', label: '平均住院日(天)', width: '120', align: 'center' },
    { prop: 'val2', label: '次均费用(元)', align: 'center' },
  ],
  line11: [
    { prop: 'val1', label: '死亡病例数(例)', width: '120', align: 'center' },
    { prop: 'val2', label: '低风险死亡病例数(例)', align: 'center' },
    { prop: 'val3', label: '死亡率(%)', width: '120', align: 'center' },
    { prop: 'val4', label: '低风险死亡率(%)', align: 'center' },
  ],
  line12: [
    { prop: 'val1', label: '高倍率病例数(例)', width: '120', align: 'center' },
    { prop: 'val2', label: '低倍率病例数(例)', align: 'center' },
    { prop: 'val3', label: '高倍率占比(%)', width: '120', align: 'center' },
    { prop: 'val4', label: '低倍率占比(%)', align: 'center' },
  ],
}

const columns = ref([])

const fetchData = async () => {
  try {
    const res = await http.post(`/Statistic/Overview/Detail`, {
      type: currentType.value,
      pageNo: currentPage.value,
      pageSize: pageSize.value,
    })
    tableData.value = res.data.list || []
    total.value = res.data.total || 0
  } catch (error) {
    console.error('获取详情数据失败:', error)
  }
}

const handleSizeChange = (val) => {
  pageSize.value = val
  fetchData()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchData()
}

const handleClose = () => {
  dialogVisible.value = false
  tableData.value = []
  title.value = ''
  currentPage.value = 1
  emit('update:modelValue', false)
}

const currentType = ref('')

const getTitleByType = (type) => {
  const titles = {
    line1: '医疗费用分析',
    line2: '不同医保类型盈亏趋势',
    line3: '费用结构',
    line4: '科室盈亏分析',
    line5: '总病例数与入组率趋势',
    line6: '四级手术占比及数量趋势',
    line7: 'CMI',
    line8: '科室CMI与盈亏分布',
    line9: '时间消耗指数与费用消耗指数',
    line10: '平均住院日与次均费用',
    line11: '低风险死亡率趋势',
    line12: '高低倍率病例趋势图',
  }
  return titles[type] + '详情' || '详细数据'
}

const open = async (type) => {
  currentType.value = type
  dialogVisible.value = true
  title.value = getTitleByType(type)
  columns.value = columnConfigs[type] || []
  currentPage.value = 1
  await fetchData()
}

defineExpose({
  open,
})
</script>

<style lang="less" scoped>
.pagination-container {
  margin-top: 20px;
  text-align: right;
}

:deep(.el-dialog__body) {
  padding: 20px;
}

.el-table {
  margin-bottom: 20px;
}
</style>
